<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>誉禾植物店</title>
  <!-- bootstrap样式 -->
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- element-ui的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/common.css">

  <!-- vue2框架的js和emenet-ui的js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 可以发送jquery请求 -->
  <script src="../js/jquery.min.js"></script>
  <!-- bootstrap框架 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <!-- js动画 -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <!-- 用于发送请求 -->
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<body>
  <div id="home">
    <div style="padding-top: 1%;padding-left: 2%; background-color: #97df4f;display: flex;">
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
      </el-radio-group>
      <div style="margin-top: 0.25%;margin-left: 7%;">
        <h4 style="font-weight: 600;">誉禾植物店后台管理</h4>
      </div>
    </div>
    <div style="display: flex;margin-top: 0.5%;">
      <div style="width: 15%;">
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
          :collapse="isCollapse">
          <el-menu-item index="1">
            <span slot="title"><a href="./home.html">主页</a></span>
          </el-menu-item>
          <el-menu-item index="2">
            <span slot="title"><a href="./goods.html">植物管理</a></span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title"><a href="./addGoods.html">新增植物</a></span>
          </el-menu-item>
          <el-menu-item index="4">
            <span slot="title"><a href="./information.html">新闻管理</a></span>
          </el-menu-item>
          <el-menu-item index="5">
            <span slot="title"><a href="./addInformation.html">新增新闻</a></span>
          </el-menu-item>
          <el-menu-item index="6">
            <span slot="title"><a href="./order.html">订单管理</a></span>
          </el-menu-item>
          <el-menu-item index="7">
            <span slot="title"><a href="./user.html">用户管理</a></span>
          </el-menu-item>
          <el-menu-item index="8">
            <span slot="title"><a href="./userinfo.html">个人信息</a></span>
          </el-menu-item>
          <el-menu-item index="9">
            <span slot="title"><a href="./login.html">退出登录</a></span>
          </el-menu-item>
        </el-menu>
      </div>
      <div style="width: 85%;padding-top: 2%;">
        <div style="width: 85%;margin: auto;padding-top: 1%;">
          <div style="width: 85%;margin: auto;padding-top: 1%;">
            <div style="width: 100%; border-bottom: 1px solid #aca7a7;display: flex;">
              <div><span style="font-size: 20px;font-weight: 600;">添加商品</span></div>
            </div>
            <div style="margin-top: 3%;">
              <el-form status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm"
                style="width: 60%;margin: auto;">
                <el-form-item label="植物名称" prop="name">
                  <el-input type="text" v-model="ruleForm.name" autocomplete="off" placeholder="请输入植物名称"></el-input>
                </el-form-item>
                <el-form-item label="植物图片">
                  <el-upload class="avatar-uploader" :action="url+'/upload'" :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                    <img v-if="imageUrl" :src="url+'/download/'+imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                  <el-input type="text" v-model="ruleForm.price" autocomplete="off" placeholder="请输入价格"></el-input>
                </el-form-item>
                <el-form-item label="分类" prop="type">
                  <el-select v-model="ruleForm.type" placeholder="请选择">
                    <el-option label="多肉小苗" value="多肉小苗"></el-option>
                    <el-option label="多肉盆栽" value="多肉盆栽"></el-option>
                    <el-option label="植物摆件" value="植物摆件"></el-option>
                    <el-option label="多肉盆器" value="多肉盆器"></el-option>
                    <el-option label="花卉绿植" value="花卉绿植"></el-option>
                    <el-option label="促销活动" value="促销活动"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="材料" prop="material">
                  <el-input type="text" v-model="ruleForm.material" autocomplete="off" placeholder="请输入材料"></el-input>
                </el-form-item>
                <el-form-item label="包装" prop="packing">
                  <el-input type="text" v-model="ruleForm.packing" autocomplete="off" placeholder="请输入包装"></el-input>
                </el-form-item>
                <el-form-item label="花语" prop="language">
                  <el-input type="text" v-model="ruleForm.language" autocomplete="off" placeholder="请输入植物花语"></el-input>
                </el-form-item>
                <el-form-item label="配送范围" prop="distribution">
                  <el-input type="text" v-model="ruleForm.distribution" autocomplete="off"
                    placeholder="默认为全国（如果不填写就会默认全国可配送）"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="success" @click="submitForm()">新增</el-button>
                  <el-button @click="resetForm()">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  new Vue({
    el: '#home',
    data() {
      return {
        isCollapse: false,
        ruleForm: {},
        imageUrl: '',
        url: 'http://localhost:9081/common',
      };
    },
    created() {
      // 判断是否有登录
      if (localStorage.getItem("managentId") == null) {
        window.location.href = './login.html';
        return;
      } 
    },
    methods: {
      // 确认新增
      async submitForm() {
        this.ruleForm.img = this.imageUrl;
        const { data: result } = await this.$http.post("http://localhost:9081/plants_goods/insert", this.ruleForm);
        if (result.flag) {
          // 新增成功
          this.$message.success(result.message);
          window.location.href = './goods.html';
        } else {
          // 新增失败
          this.$message.error(result.message);
        }
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      // 图片上传成功时调用
      handleAvatarSuccess(res, file) {
        this.imageUrl = res.data;
      },
      // 如果管理员取消添加就清空数据
      resetForm() {
        this.ruleForm = {};
        this.imageUrl = '';
        return;
      }
    }
  })
</script>

</html>